<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>优惠券管理</span>
      <div>
        <el-button type="primary" @click="joinexportlist()"
          >新增优惠券</el-button
        >
        <el-button @click="chengecz" icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <el-input
              v-model="input1"
              class="chengeinout"
              clearable
              placeholder="请输入优惠券名"
            ></el-input>
            <el-select
              v-model="input2"
              class="chengeinout"
              clearable
              placeholder="请选择优惠券类型"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="leftitem">
            <el-date-picker
              style="margin-right: 560px"
              v-model="input6"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              :picker-options="pickerOptions1"
              :clearable="false"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-autocomplete
              v-model.trim="input3"
              class="chengeinout"
              :fetch-suggestions="merchantslist"
              :debounce="300"
              placeholder="请选择指定商户"
            ></el-autocomplete>

            <el-select
              v-model="input4"
              class="chengeinout"
              clearable
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-input
              v-model="input5"
              class="chengeinout"
              clearable
              placeholder="请输入创建人员"
            ></el-input>
          </div>
          <div class="rightitem">
            <el-button  icon="el-icon-search" id="sousou" @click="chengess" type="primary"
              >搜索</el-button
            >
            <el-button  icon="el-icon-refresh"  @click="chengecz" type="primary"
              >重置</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <div class="tableBox">
      <el-table
        ref="multipleTable"
        :show-overflow-tooltip="true"
        :data="merchantarr"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
        :header-cell-style="tableHeaderColor"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          type="index"
          width="50"
          label="序号"
          :index="indexMethod"
        ></el-table-column>

        <el-table-column
          align="center"
          property="couponTypeName"
          width="150"
          label="优惠券名称"
        ></el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            {{
              scope.row.concessions == 1
                ? "满减券"
                : scope.row.concessions == 2
                ? "折扣券"
                : "随机金额券"
            }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="150"
          property="preferentialStr"
          label="优惠内容"
        ></el-table-column>

        <el-table-column width="200" label="已核销/全部优惠券">
          <template slot-scope="scope">
            <div style="display: flex">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                style="width: 150px"
                :status="
                  scope.row.couponCount / scope.row.hasWritenOff == Infinity
                    ? 'success'
                    : 'success'
                "
                :percentage="setItem(scope.row)"
                v-if="!isNaN(scope.row.hasWritenOff / scope.row.couponCount)"
              ></el-progress>
              <span
                style="padding-left: 25%"
                v-if="
                  scope.row.hasWritenOff === 0 && scope.row.couponCount === 0
                "
                >暂无优惠券</span
              >
              <span v-else
                >{{ scope.row.hasWritenOff }}/{{ scope.row.couponCount }}</span
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column
          property="merchantName"
          width="100"
          label="指定商户"
        ></el-table-column>

        <el-table-column align="center" width="70" label="状态">
          <template slot-scope="scope">
            <div
              :class="
                scope.row.status == 1
                  ? 'orange'
                  : scope.row.status == 2
                  ? 'blue'
                  : 'hui'
              "
            >
              {{
                scope.row.status == 1
                  ? "未开始"
                  : scope.row.status == 2
                  ? "进行中"
                  : "已结束"
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          property="createTime"
          align="center"
          label="创建时间"
        ></el-table-column>

        <el-table-column fixed="right" align="left" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="chengexq(scope.row)"
              >详情</el-button
            >
            <el-button type="text" size="small" @click="chengebj(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status == 1"
              size="small"
              @click="chengecx(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="size"
          :current-page.sync="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      title="删除"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <h3>确定删除此优惠券吗?</h3>
      <span>删除后将无法找回数据</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chengeqrhx">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="title == 1 ? '新增' : '编辑'"
      :visible.sync="dialogVisible1"
      width="40%"
      :before-close="handleClose1"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="批次号">
          <el-input
            v-model="ruleForm.time"
            style="width: 300px"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="优惠券通道" prop="region">
          <el-select
            v-model="ruleForm.region"
            style="width: 300px"
            placeholder="请选择优惠券通道"
          >
            <el-option label="收呗通道" value="10000"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="优惠券名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            style="width: 300px"
            placeholder="请输入10字以内优惠券名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="发放总数量" prop="name1">
          <el-input
            type="number"
            :disabled="this.title == 2"
            style="width: 300px"
            oninput="if(value>10000){value=10000}else if(value==''){value=''}else if(value == 0){value = 1}"
            placeholder="1~10000"
            v-model.number="ruleForm.name1"
          ></el-input>
        </el-form-item>

        <el-form-item label="有效时间" prop="date1">
          <el-date-picker
            style="width: 300px"
            v-model="ruleForm.date1"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions1"
            :clearable="false"
            :default-time="['00:00:00', '23:59:59']"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券类型" prop="delivery">
          <el-radio-group v-model="ruleForm.delivery">
            <el-radio-button :label="1">满减券</el-radio-button>
            <el-radio-button :label="2">折扣券</el-radio-button>
            <el-radio-button :label="3">随机金额券</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="使用条件" prop="name2">
          订单满
          <el-input
            v-model.number="ruleForm.name2"
            oninput="if(value<0){value=0}"
            type="number"
            style="width: 80px"
            placeholder=""
          ></el-input>
          元使用，如设置为0，则无使用门槛
        </el-form-item>
        <el-form-item
          v-if="this.ruleForm.delivery == 1"
          label="优惠内容"
          prop="name3"
        >
          减免
          <el-input
            v-model.number="ruleForm.name3"
            type="number"
            oninput="if(value<0){value=0}"
            style="width: 80px"
            placeholder=""
          ></el-input>
          元
        </el-form-item>

        <el-form-item label="优惠内容" v-if="this.ruleForm.delivery == 2">
          <el-col :span="7">
            <el-form-item prop="name4">
              打
              <el-input
                v-model.number="ruleForm.name4"
                type="number"
                oninput="if(value<0){value=0}"
                style="width: 80px"
                placeholder=""
              ></el-input>
              折，
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item>
              最多优惠
              <el-input
                v-model.number="ruleForm.name5"
                type="number"
                oninput="if(value<0){value=0}"
                style="width: 80px"
                placeholder=""
              ></el-input>
              元，不填写无限制
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="优惠内容" v-if="this.ruleForm.delivery == 3">
          <el-col :span="7">
            <el-form-item prop="name6">
              范围在
              <el-input
                v-model.number="ruleForm.name6"
                type="number"
                oninput="if(value<0){value=0}"
                style="width: 80px"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item prop="name7">
              ~
              <el-input
                v-model.number="ruleForm.name7"
                type="number"
                oninput="if(value<0){value=0}"
                style="width: 80px"
                placeholder=""
              ></el-input>
              元内随机产生
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="指定商户" prop="region1">
          <el-autocomplete
            v-model="ruleForm.region1"
            style="width: 300px"
            :fetch-suggestions="merchantslist"
            :debounce="300"
            placeholder="请选择商户"
            @select="marid"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="指定门店" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio :label="0">不限制</el-radio>
            <el-radio :label="1">部分可用</el-radio>
            <el-radio :label="2">部分不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="this.ruleForm.resource != 0"
          label=""
          prop="region2"
        >
          <el-select
            v-model="ruleForm.region2"
            multiple
            clearable
            filterable
            style="width: 300px"
            placeholder="请选择门店"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.shopName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chengexsdasd('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="chengexz('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="下载优惠券码"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose2"
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="chengeqrhx2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  merchantlist,
  shopall,
  coupontypeList,
  coupontypeSave,
  coupontypeDelete,
} from "@/api/api";
import md5 from "js-md5";
const cityOptions = ["未核销", "核销中", "已核销", "已撤销"];
export default {
  name: "item-one",
  data: function () {
    return {
      loading: false,
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      merchantarr: [],
      ids: 0,
      title: 1,
      page: 1,
      num: 0,
      size: 10,
      total: 100,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: null,
      options1: [
        {
          value: 1,
          label: "满减券",
        },
        {
          value: 2,
          label: "折扣券",
        },
        {
          value: 3,
          label: "随机金额券",
        },
      ],
      options2: [
        {
          value: 1,
          label: "未开始",
        },
        {
          value: 2,
          label: "进行中",
        },
        {
          value: 3,
          label: "已结束",
        },
      ],

      options3: [],

      merchantId: 0,
      ss: {},
      data1Map: new Map(),
      data2Map: new Map(),
      pickerMinDate: null,
      pickerMaxDate: null,
      day31: 31 * 24 * 3600 * 1000,
      pickerOptions1: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.day31 ||
              time.getTime() < this.pickerMinDate - this.day31
            );
          }
          return false;
        },
      },

      ruleForm: {
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        time: 0,
        region: "",
        region1: "",
        region2: [],
        date1: "",
        delivery: "满减券",
        resource: 0,
      },
      rules: {
        name: [
          { required: true, message: "请输入优惠券名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        name1: [
          { required: true, message: "请输入发放总数量", trigger: "blur" },
        ],
        name2: [{ required: true, message: "请输入使用条件", trigger: "blur" }],
        name3: [{ required: true, message: "请输入优惠内容", trigger: "blur" }],
        name4: [{ required: true, message: "请输入优惠内容", trigger: "blur" }],
        // name5: [
        //   { required: true, message: '请输入优惠内容', trigger: 'blur' },
        // ],
        name6: [{ required: true, message: "请输入优惠内容", trigger: "blur" }],
        name7: [{ required: true, message: "请输入优惠内容", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        region1: [
          { required: true, message: "请选择指定商户", trigger: "change" },
        ],
        region2: [{ required: true, message: "请选择门店", trigger: "blur" }],
        date1: [{ required: true, message: "请选择日期", trigger: "change" }],

        delivery: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
      checkAll: false,
      checkedCities: ["未核销", "核销中", "已核销", "已撤销"],
      cities: cityOptions,
      isIndeterminate: true,
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);

    // console.log("tagss", 20 / 0);

    this.changelist();
    this.chengetotle();
  },
  methods: {
    // 分页序号
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    chengetotle() {},
    setItem(row) {
      let num =
        row.hasWritenOff / row.couponCount == 1
          ? 100
          : parseFloat((row.hasWritenOff / row.couponCount).toFixed(1) * 100);
      return row.hasWritenOff / row.couponCount == Infinity ? 0 : num;
    },
    isNaN(value) {
      // console.log(value);
    },
    merchantslist(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantName: this.ruleForm.region1,
      };
      merchantlist(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },

    marid(item) {
      // console.log('tag', item,this.input2)
      this.merchantId = item.id;

      shopall({ page: 1, size: 10000, merchantId: item.id }).then((res) => {
        // console.log(res);
        this.options3 = res.data.rows;
      });
    },
    allshops(queryString, cb) {
      // let allshope = this.allshop;
      let sosolist = {};

      sosolist = {
        page: 1,
        size: 20,
        merchantId: this.merchantId,
        // shopName: this.tarminal.shopName,
      };

      if (this.userInfo.rolesId == 5) {
        sosolist = {
          page: 1,
          size: 20,
          merchantId: this.userInfo.mid,
          // shopName: this.tarminal.shopName,
        };
      } else if (this.userInfo.rolesId != 5 && this.userInfo.rolesId != 6) {
        sosolist = {
          page: 1,
          size: 20,
          merchantId: this.merchantId,
          // shopName: this.tarminal.shopName,
        };
      }

      shopall(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.allshop = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.allshop.push({
              value: res.data.rows[i].shopName,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.allshop.filter(this.createFilter(queryString))
            : this.allshop;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    shopid(item) {
      // console.log(item,this.input3)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },

    //详情
    chengexq(item) {
      this.$router.push({
        path: "/CouponiLstDetailed",
        query: {
          id: item.id,
        },
      });
    },
    //删除
    chengecx(item) {
      this.dialogVisible = true;
      this.ids = item.id;
    },
    //编辑
    async chengebj(item) {
      this.title = 2;
      if (item.concessions == 1) {
        this.ruleForm = {
          name: item.couponTypeName,
          name1: item.couponCount,
          name2: JSON.parse(item.preferential).over || "",
          name3: JSON.parse(item.preferential).minus || "",
          name4: "",
          name5: "",
          name6: "",
          name7: "",
          time: item.batchCode,
          region: item.channelName,
          region1: item.merchantName,

          region2: [],

          date1: [item.startTime, item.endTime],
          delivery: item.concessions,
          resource: item.limitType,
        };
      } else if (item.concessions == 2) {
        this.ruleForm = {
          name: item.couponTypeName,
          name1: item.couponCount,
          name2: JSON.parse(item.preferential).over,
          name3: "",
          name4: JSON.parse(item.preferential).off,
          name5: JSON.parse(item.preferential).max,
          name6: "",
          name7: "",
          time: item.batchCode,
          region: item.channelName,
          region1: item.merchantName,

          region2: [],

          date1: [item.startTime, item.endTime],
          delivery: item.concessions,
          resource: item.limitType,
        };
      } else {
        this.ruleForm = {
          name: item.couponTypeName,
          name1: item.couponCount,
          name2: JSON.parse(item.preferential).over,
          name3: "",
          name4: "",
          name5: "",
          name6: JSON.parse(item.preferential).min,
          name7: JSON.parse(item.preferential).max,
          time: item.batchCode,
          region: item.channelName,
          region1: item.merchantName,

          region2: [],

          date1: [item.startTime, item.endTime],
          delivery: item.concessions,
          resource: item.limitType,
        };
      }
      if (item.limitType != 0) {
        const res = await shopall({
          page: 1,
          size: 10000,
          merchantId: item.merchantId,
        });
        this.options3 = res.data.rows;
        this.options3.forEach((val) => {
          item.limitCoupon.forEach((ele) => {
            if (val.shopName === ele) {
              this.ruleForm.region2.push(val.id);
            }
          });
        });
      }
      this.ids = item.id;
      this.merchantId = item.merchantId;
      this.dialogVisible1 = true;
    },

    //确认删除
    chengeqrhx() {
      coupontypeDelete({ id: this.ids }).then((res) => {
        this.changelist();
      });

      this.dialogVisible = false;
    },

    //搜索
    chengess() {
      if (
        this.date == null ||
        this.date.length == 0 ||
        this.date == undefined
      ) {
        this.date = [];
      }
      this.page = 1;
      let ss = {
        page: 1,
        size: this.size,
        couponTypeName: this.input1,
        merchantName: this.input3,
        concessions: this.input2,
        status: this.input4,

        startTime: this.input6 == null ? "" : this.input6[0],
        endTime: this.input6 == null ? "" : this.input6[1],
      };

      // console.log("tag", ss);

      coupontypeList(ss).then((res) => {
        this.merchantarr = res.data.rows;
        this.total = res.data.total;
      });
    },
    //重置
    chengecz() {
      this.page = 1;
      this.size = 10;
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.input5 = "";
      this.input6 = null;

      this.changelist();
    },
    //查询列表
    changelist() {
      this.loading = true;
      let ss = {
        page: this.page,
        size: this.size,
      };

      coupontypeList(ss).then((res) => {
        this.merchantarr = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose1() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible1 = false;
      this.ruleForm = {
        time: 0,
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        region: "",
        region1: "",
        date1: "",
        delivery: 1,
        resource: 0,
      };
    },
    handleClose2() {
      this.dialogVisible2 = false;
    },
    //多选框
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    // 显示数量
    sizechange(val) {
      this.size = val;
      this.page = 1;

      let ss = {
        page: this.page,
        size: this.size,
        couponTypeName: this.input1,
        merchantName: this.input3,
        concessions: this.input2,
        status: this.input4,

        startTime: this.input6 == null ? "" : this.input6[0],
        endTime: this.input6 == null ? "" : this.input6[1],
      };

      coupontypeList(ss).then((res) => {
        this.merchantarr = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;

      let ss = {
        page: this.page,
        size: this.size,
        couponTypeName: this.input1,
        merchantName: this.input3,
        concessions: this.input2,
        status: this.input4,

        startTime: this.input6 == null ? "" : this.input6[0],
        endTime: this.input6 == null ? "" : this.input6[1],
      };

      coupontypeList(ss).then((res) => {
        this.merchantarr = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 下载
    merchantexcel() {
      this.dialogVisible2 = true;
      this.cities = cityOptions;
    },
    //下载确认
    chengeqrhx2() {
      this.dialogVisible2 = false;
    },

    // 新增优惠券
    joinexportlist() {
      this.dialogVisible1 = true;
      // this.$refs['ruleForm'].resetFields();
      this.ruleForm = {
        time: new Date().getTime(),
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        region: "",
        region1: "",
        date1: "",
        delivery: 1,
        resource: 0,
      };
      this.title = 1;
    },
    //确认新增
    chengexz(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var date = new Date();
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          var D =
            date.getDate() < 10
              ? "0" + date.getDate() + " "
              : date.getDate() + " ";
          var H = date.getHours() + ":";
          var M2 =
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) + ":";
          var S =
            date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds();

          var aa = Y + M + D + H + M2 + S;

          var ss = {};

          if (this.ruleForm.delivery == 1) {
            ss = {
              batchCode: this.ruleForm.time,
              channelName: this.ruleForm.region,
              couponTypeName: this.ruleForm.name,
              couponCount: this.ruleForm.name1,
              startTime: this.ruleForm.date1[0],
              endTime: this.ruleForm.date1[1],

              channelType: "10000",
              concessions: this.ruleForm.delivery,

              preferential: {
                over: this.ruleForm.name2,
                minus: this.ruleForm.name3,
              },

              createTime: aa,

              merchantId: this.merchantId,
              merchantName: this.ruleForm.region1,
              limitType: this.ruleForm.resource,
            };
          } else if (this.ruleForm.delivery == 2) {
            ss = {
              batchCode: this.ruleForm.time,
              channelName: this.ruleForm.region,
              couponTypeName: this.ruleForm.name,
              couponCount: this.ruleForm.name1,
              startTime: this.ruleForm.date1[0],
              endTime: this.ruleForm.date1[1],

              channelType: "10000",
              concessions: this.ruleForm.delivery,

              preferential: {
                over: this.ruleForm.name2,
                off: this.ruleForm.name4,
                max: this.ruleForm.name5,
              },

              createTime: aa,

              merchantId: this.merchantId,
              merchantName: this.ruleForm.region1,
              limitType: this.ruleForm.resource,
            };
          } else {
            ss = {
              batchCode: this.ruleForm.time,
              channelName: this.ruleForm.region,
              couponTypeName: this.ruleForm.name,
              couponCount: this.ruleForm.name1,
              startTime: this.ruleForm.date1[0],
              endTime: this.ruleForm.date1[1],
              channelType: "10000",
              concessions: this.ruleForm.delivery,
              preferential: {
                over: this.ruleForm.name2,
                min: this.ruleForm.name6,
                max: this.ruleForm.name7,
              },

              createTime: aa,
              merchantId: this.merchantId,
              merchantName: this.ruleForm.region1,
              limitType: this.ruleForm.resource,
            };
          }

          if (this.title == 2) {
            ss.id = this.ids;
          }

          if (ss.limitType != 0) {
            ss.limitCouponStr = this.ruleForm.region2.toString();
          }

          this.dialogVisible1 = false;

          coupontypeSave(ss).then((res) => {
            this.changelist();
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    //取消新增
    chengexsdasd(formName) {
      this.dialogVisible1 = false;
      this.$refs[formName].resetFields();
      this.ruleForm = {
        time: 0,
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        region: "",
        region1: "",
        date1: "",
        delivery: 1,
        resource: 0,
      };
    },
    handleCheckAllChange(val) {
      // console.log("tag", val);
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>
<style scoped lang="less">
.red {
  color: red;
}
.chengeinout {
  width: 180px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.chengebutton {
  margin-left: 30px;
  padding: 0 30px;
}

.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.width30 {
  width: 30%;
}
.red {
  color: #f9607d;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  text-align: center;
  line-height: 200%;
}
.BDname {
  width: 20%;
}
.width60 {
  width: 40%;
}
.yuan {
  color: #c1c5cb;
  font-size: 12px;
  position: relative;
  left: -20px;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.orange {
  width: 60px;
  background: #f29c38;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  width: 60px;
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.reds {
  background: #d3362f;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.blue {
  width: 60px;
  background: #4154af !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}

.chengestore1 {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
}
.chengestore2 {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(64, 158, 255, 0.4980392156862745);
}
.chengestore3 {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(170, 170, 170, 0.4980392156862745);
}
/deep/.el-progress-bar__outer {
  height: 6px;
  border-radius: 100px;
  background-color: #ccc;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
</style>